// 导入base.less
@import url(base.less);
// 导入normalize.less
@import url(normalize.less);
// 导入common.less公共样式
@import url(commom.less);
// 声明基准值变量
// width: (10 / 37.5rem)
@baseSize: 37.5rem;
@gColor: #14916a;

.bannar {
  width: (375 / @baseSize);
  height: (170 / @baseSize);

}

// 主体内容部分
main {
  .csae {
    display: flex;
    flex-direction: column;
    padding: (28 / @baseSize) 0;
    background-color: #fff;

    .pic-list {
      display: flex;
      flex-direction: column;

      li {
        position: relative;
        width: (355 / @baseSize);
        height: (242 / @baseSize);
        margin-bottom: (10 / @baseSize);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        //直角三角形
        .triangle {
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 0;
          // border-top: (10 / @baseSize) solid pink;
          border-bottom: (30/ @baseSize) solid transparent;
          border-right: (30 / @baseSize) solid rgba(20, 145, 106, .5);
          border-left: (30 / @baseSize) solid transparent;
        }

        //遮罩
        .pic-mask {
          font-size: (20 / @baseSize);
          position: absolute;
          top: (21 / @baseSize);
          left: (17 / @baseSize);
          bottom: (17 / @baseSize);
          right: (19 / @baseSize);
          // width: 100%;
          // height: 100%;
          width: (319 / @baseSize);
          height: (204 / @baseSize);
          background: rgba(0, 0, 0, .7);
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          display: none;
        }
      }
    }

    .more {
      display: flex;
      justify-content: space-between;
      margin: (20 / @baseSize) 0;

      a {
        display: inline-block;
        font-size: 14px;
        padding: (9 / @baseSize) (25 / @baseSize) (8 / @baseSize) (19 / @baseSize);
        background-color: @gColor;
        color: #fff;
        border-top-left-radius: (15 / @baseSize);
        border-bottom-right-radius: (15 / @baseSize);
      }
    }
  }
}